<template>
  <div>
    <div class="btnBox">
      <el-button type="primary" size="small" @click="handleAdd()">增加</el-button>
    </div>

    <el-table :data="tableData" border style="width: 95%" :height="getHeight()" class="table">
      <el-table-column fixed type="index" label="序号" width="80" align="center">
      </el-table-column>
      <el-table-column prop="title" label="文章标题" width="200" align="center">
      </el-table-column>
      <el-table-column prop="pic_url" label="展示图片" width="300" align="center">
        <template slot-scope="{row}">
          <img :src="row.pic_url" alt="" style="width: 100px;">
        </template>
      </el-table-column>
      <el-table-column prop="created_at" label="添加时间" width="300" align="center">
      </el-table-column>
      <el-table-column prop="created_at" label="更新时间" width="300" align="center">
      </el-table-column>
      <el-table-column prop="detail" label="内容" width="300" align="center">
      </el-table-column>
      <el-table-column prop="desc" label="摘要" width="300" align="center">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="200" align="center">
        <template slot-scope="scope">

          <el-button @click="handleEdit(scope.row)" type="text" size="small" >编辑</el-button>
          <el-button @click="handleDel(scope.row)" type="text" size="small" style="color: red;">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
      :page-sizes="[5, 10, 15, 20]" :page-size="limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>

    <el-dialog :title="title" :visible.sync="dialogFormVisible" @close="clearFrom()">
      <el-form :model="form" label-width="80px">
        <el-form-item label="文章标题" >
          <el-input v-model="form.title" placeholder="请输入文章标题"></el-input>
        </el-form-item>

        <el-form-item label="展示图片" >
          <el-input v-model="form.pic_url" placeholder="请输入图片链接"></el-input>
        </el-form-item>

        <el-form-item label="内容" >
          <el-input v-model="form.detail" placeholder="请输入内容"></el-input>
        </el-form-item>

        <el-form-item label="摘要" >
          <el-input v-model="form.desc" placeholder="请输入摘要"></el-input>
        </el-form-item>
       
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false;onSubmit()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
  
<script>
import { getArticleInfo, addArticle, delArticle, editArticle } from '@/api/article'
export default {
  name: 'recommend',
  data() {
    return {
      tableData: [],
      page: 1,
      limit: 10,
      total: 0,
      dialogFormVisible:false,
      form:{},
      title:'',
    }
  },
  created() {
    this.getArticleList()
  },
  methods: {
    getArticleList() {
      getArticleInfo({
        page: 1,
        limit: 10,
      }).then((res) => {
        // console.log(res)
        this.tableData = res.data.list
        this.total = res.data.count
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getArticleList()
    },
    handleCurrentChange(val) {
      this.page = val
      this.getArticleList()
    },

    getHeight() {
      return window.innerHeight - 240
    },
    handleAdd() {
      this.title='增加文章'
      this.dialogFormVisible=true;
    },
    handleEdit(row) {
      this.title='编辑文章'
      this.dialogFormVisible=true;
      this.form={...row}
    },
    onSubmit(){
      if(this.title=='增加文章'){
        this.addSubmit()
      }else{
        this.editSubmit()
      }
    },

    addSubmit(){
      addArticle(this.form).then((res)=>{
       if(res.code===1){
        this.$message.success('添加成功')
        this.getArticleList()

       }
      })
    },
    editSubmit(){
      editArticle(this.form).then((res)=>{
        if(res.code===1){
        this.$message.success('编辑成功')
        this.getArticleList()

       }
      })
    },
    clearFrom(){
      this.from={}
    },
    handleDel(row){
      delArticle(row).then((res)=>{
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          if(res.code===1){
        this.$message.success('删除成功')
        this.getArticleList()
       }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
       
      })
    }
    
   


  },


}
</script>  
  
<style  scoped>
.btnBox {
  padding: 20px;
  border-bottom: 1px solid #ccc;
}

.table {
  margin: 20px;
}
</style>
  